<style>
    .layui-input, .layui-textarea {
        display: block;
        width: 85%;
        padding-left: 10px;
    }

    .layui-form-label {
        float: left;
        display: block;
        padding: 9px 15px;
        width: 113px;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }

    .layui-form-label.required:before { /* 这种写法也可以*/
        content: ' *';
        color: red;
    }

    .layui-form-select dl {
        left: 33px;
        min-width: 85%;
    }
</style>

<script type="text/html" id="viewAttachmentHtml">
    <div id="example1" style="height: 100%;"></div>
</script>
<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>
<!-- 表单弹窗 -->
<form lay-filter="productReviewForm" class="layui-form model-form">
    <input name="id" type="hidden"/>

    <fieldset class="layui-elem-field layui-field-title">
        <legend>客户信息产品信息</legend>            
    </fieldset>

    <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
            <label class="layui-form-label">客户名称：</label>
            <div class="layui-input-block">
                <input name="customerName" disabled type="text" class="layui-input"
                       lay-verify="required"/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">客户产品类别：</label>
            <div class="layui-input-block">
                <input name="cusProductCategory" disabled type="text" class="layui-input" autocomplete="off"/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">客户SKU料号：</label>
            <div class="layui-input-block">
                <input name="cusSkuCode" type="text" disabled class="layui-input"
                       lay-verify="required"
                       required autocomplete="off"/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">客户产品名称：</label>
            <div class="layui-input-block">
                <input name="cusProductName" disabled type="text" class="layui-input"
                       lay-verify="required"
                       required autocomplete="off"/>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
            <label class="layui-form-label">客户规格码：</label>
            <div class="layui-input-block">
                <input name="cusProductSpec" disabled type="text" class="layui-input"
                       lay-verify="required"
                       required autocomplete="off"/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">附件信息：</label>
            <div class="layui-input-block" style="display: flex; align-items: center;">
                <div id="addHeaderPdf" class="companyFormPhotos"></div>
                <input name="attachmentPdf" id="attachmentPdf" type="hidden" class="layui-input"/>
                <label id="fileName" style="margin-left: 34px"></label>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">需求数量：</label>
            <div class="layui-input-block">
                <input name="cusProductCount" disabled type="text" class="layui-input"
                       lay-verify="required"
                       required autocomplete="off"/>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">评审截止时间：</label>
            <div class="layui-input-block">
                <input name="reviewEndTime" disabled type="text" class="layui-input"/>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
            <label class="layui-form-label required">计划交货时间：</label>
            <div class="layui-input-block">
                <input type="text" id="planGivenTime" disabled name="planGivenTime" class="layui-input"
                       placeholder="请选择计划交货时间">
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">包装说明：</label>
            <div class="layui-input-block">
                <input name="remark" disabled type="text" class="layui-input"/>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-row">
        <div class="layui-col-md6">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>图纸预览图</legend>
            </fieldset>
            <div id="TuZhiPdf" style="height: 100%;margin-left:10px">

            </div>
        </div>
        <div class="layui-col-md6">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>评审审核意见</legend>
            </fieldset>
            <div class="layui-col-md6">
                <label class="layui-form-label">评估结果：</label>
                <div class="layui-input-block">
                    <select id="result-sh" name="result" lay-filter="result"
                            class="common-select-search">
                        <option value="">请选择</option>
                        <option value="0">审核不通过</option>
                        <option value="1">审核通过</option>
                    </select>
                </div>
            </div>
            <div class="layui-col-md6">
                <label class="layui-form-label">评估备注：</label>
                <div class="layui-input-block">
                    <input type="text" id="reviewDesc" name="reviewDesc" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="productReviewFormSubmit" lay-submit>保存</button>
    </div>
</form>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'laydate', 'admin', 'laytpl', 'upload', 'config'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var config = layui.config;
        var upload = layui.upload;
        var table = layui.table;
        var admin = layui.admin;
        var form = layui.form;
        var laydate = layui.laydate;

        let customerName = "";
        let postName = "";

        let fileName = "";

        let data = admin.getTempData('reviewDataAudit');

        //加载是默认填写
        // document.getElementById("d2").style.display = "none";//隐藏
        // document.getElementById("d1").style.display = "";//显示

        // 上传附件-pdf
        upload.render({
            elem: '#fileUploadBtn'
            , url: config.upload_url + 'uploadFile'
            , data: {}
            , accept: 'file'
            , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
            , headers: {Authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
                if (res.code == 200) {
                    layer.msg(res.msg || "上传成功", {icon: 1});
                    let imagUrl = res.data.url;
                    let name = res.data.fileName;
                    fileName = res.data.fileName;
                    $('#addHeaderPdf').html('<div class="attachments">' +
                        '<div><img name="attachments" src="../../../admin/assets/images/attachmentsIcon/pdf.png"><span class="file-a">' + name + '</span></div></div>');
                    $('#attachmentPdf').val(imagUrl);

                    $(".attachments").click(function () {
                        let json = {};
                        json.attachment = imagUrl;
                        showViewAttachmentModel(json);
                    })
                } else if (res.code == 502) {
                    return location.replace('admin/login.html');
                } else {
                    layer.msg(res.msg || "上传失败", {icon: 2});
                }
            }
        });

        let selectMap = new Map();

        let  skuCode = "";

        let imagUrl = "";

        /**
         * 初始化评审详情
         */
        admin.req('enterprise/product/admin/productReview/detail/' + data.id, {}, function (res) {
            if (res.code === 200) {
                console.log(' res.data', res.data);
                
                form.val('productReviewForm', res.data === undefined ? null : res.data);
                //初始化文件
                $('#addHeaderPdf').html('<div class="attachments">' +
                    '<div><img name="attachments" src="../../../admin/assets/images/attachmentsIcon/pdf.png"><span class="file-a">' + name + '</span></div></div>');
                $('#attachmentPdf').val(res.data.attachmentPdfUrl);
                imagUrl = res.data.attachmentPdfUrl;
                $('#fileName').text(res.data.fileName);
                $(".attachments").click(function () {
                    let json = {};
                    json.attachment = imagUrl;
                    showViewAttachmentModel(json);
                })
                imagUrl = res.data.attachmentPdfUrl;
                //PDF预览
                if (imagUrl && imagUrl.indexOf(".pdf") !== -1) {
                    PDFObject.embed(imagUrl, "#TuZhiPdf");
                } else {
                    let attachmentHtml = "";
                    imagUrl.split(",").forEach((attachmentUrl, index) => {
                        attachmentHtml += '<div><div><img style="width: 640px;height: 345px;" src="' + attachmentUrl + '"></div></div>';
                    });
                    $('#TuZhiPdf').html(attachmentHtml);
                }
                form.render(); //菜单渲染 把内容加载进去
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        });

        //customerId
        form.on('select(customerId)', function (data) {
            $("#cusSkuCode").empty();
            customerName = data.elem.selectedOptions[0].text;
            let customerId = data.value;
            //查询客户下的sku料号
            admin.initDataSelectAndMap("enterprise/sell/admin/customerProductCatalog/list", {limit: 9999,customerId:customerId,isHaveInSku:1}, "cusSkuCode", null, "外部产品", "cusProductName", "cusProductId", selectMap);

            form.on('select(cusSkuCode)',function (data){

                let value = data.value;
                let newVar = selectMap.get(value);
                $("#cusProductCategory").val(newVar.proTypeName);
                $("#cusProductName").val(newVar.cusProductName);
                $("#cusProductSpec").val(newVar.cusProductSpec);
                $("#proUnitName").val(newVar.proUnitName);
                skuCode = data.elem.selectedOptions[0].text;
            });

        });



        //postId
        form.on('select(postId)', function (data) {
            postName = data.elem.selectedOptions[0].text;
        });

        // 查看附件
        function showViewAttachmentModel(data) {
            admin.open({
                type: 1,
                area: ['60%', '80%'],
                offset: '65px',
                title: '查看附件',
                content: $('#viewAttachmentHtml').html(),
                success: function () {
                    if (data.attachment && data.attachment.indexOf(".pdf") !== -1) {
                        PDFObject.embed(data.attachment, "#example1");
                    } else {
                        var attachmentHtml = "";
                        data.attachment.split(",").forEach((attachmentUrl, index) => {
                            attachmentHtml += '<div><div><img src="' + attachmentUrl + '"></div></div>';
                        });
                        $('#example1').html(attachmentHtml);
                    }
                }
            })
        }

        let subjectId = "";

        //初始化客户名称
        admin.req('enterprise/sell/admin/customersInfo/getBasicInfo', {customerType: "2,3"}, function (res) {
            if (200 == res.code) {

                $("form select[name='customerId']").append(new Option("请选择客户", ""));//往下拉菜单里添加元素
                $.each(res.data, function (index, item) {
                    $("form select[name='customerId']").append(new Option(item.customerName, item.id));//往下拉菜单里添加元素
                })
                $("form select[name='customerId']").val(subjectId);
                layui.form.render(); //菜单渲染 把内容加载进
            } else {
                layer.msg('获取客户失败!', {icon: 2, time: 1000});
            }
        }, 'GET');

        // Sku老数据信息
        // admin.initDataSelectAndMap("enterprise/product/admin/productDetailWMS/list", {categoryType: "production"}, "inSkuCodeHave", null, "SKU物料", "skuCode", null, oldSkuInfo);

        //部门列表
        admin.initDataSelectTree(true, 'user/admin/role/getTreeData', null, 'departmentMain', null, "部门", "departmentId", function (data) {
            // 获取部门ID
            let departmentId = data.change[0].value;
            //赋值部门id
            $('#departmentId').val(data.change[0].value);
            $('#postId').empty();
            //部门下的岗位列表
            admin.initDataSelect("user/admin/role/getPostData", {roleId: departmentId}, "postId", null, "岗位", null, null);
        });

        //表单提交事件
        form.on('submit(productReviewFormSubmit)', function (d) {
            layer.load(2);

            d.field.id = data.id;
            d.field.reviewDesc = $("#reviewDesc").val();
            d.field.status = $("#result-sh").val();
            admin.req('enterprise/product/admin/productReview/auditInfoBy', d.field, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    table.reload('reviewTableInfo');
                    layer.closeAll('page');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'POST');
            return false;
        });

        //时间选择器
        laydate.render({
            elem: '#reviewEndTime'
            , type: 'datetime'
        });

        laydate.render({
            elem: '#planGivenTime'
            , type: 'datetime'
        });

    });
</script>